<template>
  <div
    class="main"
    :style="{
      transform: activeKey === '2' ? 'rotateY(180deg)' : 'rotateY(0deg)',
    }"
  >
    <div class="card" v-if="auditId === ''">
      <a-tabs
        v-model:activeKey="activeKey"
        :tabBarStyle="{ margin: '0px 20px 10px' }"
      >
        <a-tab-pane key="1" tab="工会专项经费管理"></a-tab-pane>
        <a-tab-pane key="2" tab="专项经费使用记录"></a-tab-pane>
      </a-tabs>
      <a-descriptions
        bordered
        :labelStyle="{ width: '200px', textAlign: 'center' }"
        :contentStyle="{ textAlign: 'center' }"
      >
        <a-descriptions-item label="基层工会名称" :span="3">
          <span style="font-weight: bold; font-size: 16px; color: #000000d9"
            >环境与生物工程学院工会
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="工会预算" :span="1">
          <a-tag color="orange">15万</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="工会已使用预算" :span="1">
          <a-tag color="green">10万</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="工会人数" :span="1">
          200人
        </a-descriptions-item>
        <a-descriptions-item label="工会管理员" :span="1">
          <a-tag color="blue">李贰伟</a-tag>
          <a-tag color="blue">呆龙</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="工会联系方式" :span="1">
          15697103295
        </a-descriptions-item>
        <a-descriptions-item label="工会地址" :span="1">
          河南郑州郑东新区
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="card" v-else>
      <MyAudit
        audit-id="1"
        :is-view="true"
        @close="(activeKey = '2'), (auditId = '')"
      />
    </div>
    <div class="table">
      <a-tabs
        v-model:activeKey="activeKey"
        :tabBarStyle="{ margin: '0px 20px 10px' }"
      >
        <a-tab-pane key="1" tab="工会经费管理"></a-tab-pane>
        <a-tab-pane key="2" tab="工会经费管理"></a-tab-pane>
      </a-tabs>
      <a-card :bodyStyle="{ padding: '15px' }" :bordered="false">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="8">
            <a-form-item
              label="专项经费名称"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-input
                v-model:value="filterRule.name"
                placeholder="请输入专项经费名称"
            /></a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="申请人"
              :label-col="{ style: { width: '100px' } }"
            >
              <MySelect
                v-model:value="filterRule.member"
                :select-data="[]"
                title="请选择申请人"
            /></a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="经费申请状态"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-radio-group
                v-model:value="filterRule.status"
                button-style="solid"
              >
                <a-radio-button :value="undefined">全部</a-radio-button>
                <a-radio-button :value="0">待财务审核</a-radio-button>
                <a-radio-button :value="1">待工会主席审核</a-radio-button>
                <a-radio-button :value="2">已审核完毕</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item
              label="申请金额大于"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-input-number
                v-model:value="filterRule.higherAmount"
                :controls="false"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="申请金额小于"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-input-number
                v-model:value="filterRule.lowerAmount"
                :controls="false"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-button type="primary" style="margin-left: 100px">
              <template #icon><search-outlined /></template>
              搜索
            </a-button>
          </a-col>
        </a-row>
      </a-card>
      <MyTable
        :tableData="tableData"
        :columns="columns"
        :pagination="pagination"
        useNumber
      ></MyTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h, reactive } from "vue";
import { Tag, PaginationProps } from "ant-design-vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import MyAudit from "../budgetApply/audit.vue";
const activeKey = ref("1");
const auditId = ref("");
const tableData = ref([
  {
    id: "1",
    name: "扩大科研项目经费",
    type: "基层工会专项经费",
    amount: 88888,
    union: "足球协会",
    member: "是呆龙没错了",
    phone: "17859520236",
    time: "2023-11-15",
    status: 1,
  },
]);
const filterRule = reactive({
  name: "",
  type: undefined,
  higherAmount: undefined,
  lowerAmount: undefined,
  member: undefined,
  status: undefined,
});
const columns = ref([
  {
    title: "专项经费名称",
    dataIndex: "name",
    isShow: true,
    align: "center",
  },
  {
    title: "专项经费类型",
    dataIndex: "type",
    isShow: true,
    align: "center",
  },
  {
    title: "专项经费金额",
    dataIndex: "amount",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: "orange" }, () => convertLimit(text));
    },
  },
  {
    title: "专项经费协会",
    dataIndex: "union",
    isShow: true,
    align: "center",
  },
  {
    title: "申请人",
    dataIndex: "member",
    isShow: true,
    align: "center",
  },
  {
    title: "申请人电话",
    dataIndex: "phone",
    isShow: true,
    align: "center",
  },
  {
    title: "剩余预算",
    dataIndex: "budget",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return text ? "" : h(Tag, { color: "blue" }, () => "7万元");
    },
  },
  {
    title: "审核状态",
    dataIndex: "status",
    isShow: true,
    align: "center",
    customRender: ({ record }) => {
      return h(
        "span",
        null,
        [
          {
            name: "待财务审核",
            color: "blue",
          },
          {
            name: "待工会主席审核",
            color: "cyan",
          },
          {
            name: "已审核完毕",
            color: "green",
          },
        ].map((item, index) => {
          if (index !== record.status) {
            return;
          }
          return h(
            Tag,
            {
              color: item.color,
            },
            () => item.name
          );
        })
      );
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    isShow: true,
    align: "center",
    customRender: () => {
      return h("div", null, [
        h(
          "a",
          {
            onClick: () => {
              auditId.value = "3";
              activeKey.value = "3";
            },
          },
          "查看"
        ),
        h("a", { style: { marginLeft: "10px" }, onClick: () => {} }, "删除"),
      ]);
    },
  },
]);
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 10,
  onChange: (page: number, pageSize: number) => {
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
  },
});

const convertLimit = (arg: number) => {
  if (!arg) {
    return undefined;
  }
  if (arg.toString().length >= 13) {
    const volume = arg / 1000000000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万亿";
  } else if (arg.toString().length >= 9) {
    const volume = arg / 100000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "亿";
  } else if (arg.toString().length >= 5) {
    const volume = arg / 10000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万";
  } else {
    return arg;
  }
};
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
.main {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  transition: all 0.4s;
  transform-style: preserve-3d;
  border: 1px solid #f0f0f0;
  .card,
  .table {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .table {
    transform: rotateY(180deg);
  }
}
:deep(.ant-col) {
  width: auto;
}
:deep(.ant-form-item) {
  margin-bottom: 0;
}
</style>
